<template>
    <div>
     <p>这是props：{{props}}</p>
     <div>countRef: {{ countRef }} name:  {{ object.name }}</div>
     <button @click="add">+1</button>
    </div>
</template>

<script>
    import { ref, reactive } from 'vue'

export default {
    props:{
        name:String
    },
    setup (props,ctx) {
        console.log("setup");
         console.log(props);
         //setup 中无法使用this ，通过context上下文，从原来 2.x 中 this 选择性地暴露了一些 property。
         console.log(ctx);
         ctx.attrs
         ctx.slots
         ctx.emit

         const countRef = ref(0);
         const object = reactive({name:"刘正星"})
         const add = () => {
             countRef.value++;
         }
        return {
            props,
            countRef,
            object,
            add
        }
    },
     beforeCreate(){
        console.log("beforeCreated");
    },
    created(){
        console.log("created");
    },
   
}
</script>

<style lang="scss" scoped>

</style>